import { defineStore } from 'pinia'

export const useThemeStore = defineStore({
  id: 'theme',
  state: () => ({
    mode: 'auto' // 从本地存储中读取主题模式
  }),
  actions: {
    // 切换主题模式
    async changeMode(mode) {
      let theme = mode
      let docTheme = mode

      if (mode === 'auto') {
        const media = window.matchMedia('(prefers-color-scheme:dark)')
        if (media.matches) {
          theme = 'dark'
          docTheme = 'dark'
        } else {
          theme = 'light'
          docTheme = 'light'
        }
      }
      const isDarkMode = theme === 'dark'

      document.documentElement.setAttribute('theme-mode', isDarkMode ? 'dark' : '')

      // 保存主题模式到本地缓存中
      localStorage.setItem('themeMode', theme)
      localStorage.setItem('vitepress-theme-appearance', docTheme)

      // 这里可以根据你的实际需求来修改代码
      this.mode = theme
    },

    // 初始化主题
    async initTheme() {
      // 从本地存储中读取主题信息
      const mode = localStorage.getItem('themeMode')

      if (mode) {
        // 如果有主题信息，则设置对应的主题
        this.changeMode(mode)
      } else {
        // 如果没有主题信息，则使用默认的主题
        this.changeMode('auto')
      }
    }
  }
})
